<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<!-- Bootstrap -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<style type="text/css">
		body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap{width:100%;height:100%;}
		p{margin-left:5px; font-size:14px;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=o4jtg1jg3TumASwaBl8DVKKTC1qbysvb"></script>
	<title>附近的商家</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
	// 百度地图API功能
	// var sContent =
	// "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" + 
	// "<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" + 
	// "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" + 
	// "</div>";
	var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
                        offset: new BMap.Size(10, 25), // 指定定位位置  
                        imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移  
                    }); 
	var map = new BMap.Map("allmap");
	var point = new BMap.Point("{$lat}", "{$lon}");
	var marker = new BMap.Marker(point,{icon:myIcon});
	// var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
	map.centerAndZoom(point, 15);
	// map.openInfoWindow(infoWindow,point); //开启信息窗口
	map.addOverlay(marker);
	// marker.addEventListener("click", function(){          
	//    this.openInfoWindow(infoWindow);
	//    //图片加载完毕重绘infowindow
	//    document.getElementById('imgDemo').onload = function (){
	// 	   infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
	//    }
	// });
	
	var $lat="{$lat}";
	var $lon="{$lon}";
	//ajxa查询附近商家信息
	var $jsonobj={"lat":$lat,"lon":$lon};  
				$.ajax({                                    
			        type:"post",
			        url:"__CONTROLLER__/shopsAround/",
			        dataType:"json",
			        data:$jsonobj,
			        success:function(data){
			        	var str="";
			        	console.log(data);
			        	$(data).each(function(i,val){
							console.log(val);
			        		id=val.bs_id;
			        		lat=val.lat;
			        		lon=val.lon;
			        		name=val.shopname;
			        		img=val.logo;
			        		content=val.type+","+val.dis;
			        		str+=id;
			        		str+=lat;
			        		str+=lon;
			        		mapAround(id,lat,lon,name,img,content);
			        	});

			        },
			        error:function(XMLResponse,err){
			            console.log(err);
			        },
				});

	// var data_info = [[119.33622111,26.0471255,"外卖1","地址：北京市东城区王府井大街88号乐天银泰百货八层","http://app.baidu.com/map/images/tiananmen.jpg"],
	// 				 [119.33022112,26.0551255,"外卖2","地址：北京市东城区东华门大街","http://app.baidu.com/map/images/tiananmen.jpg"],
	// 				 [119.34322141,26.0471255,"外卖3","地址：北京市东城区正义路甲5号","http://app.baidu.com/map/images/tiananmen.jpg"]
	// 				];
	// var opts = {
	// 			width : 250,     // 信息窗口宽度
	// 			height: 80,     // 信息窗口高度
	// 			title : "信息窗口" , // 信息窗口标题
	// 			enableMessage:true//设置允许信息窗发送短息
	// 		   };


	//标注1km内的商家，添加注释文本
	function mapAround($id,$lat,$lon,$name,$img,$content){
		var marker = new BMap.Marker(new BMap.Point($lat,$lon));  // 创建标注
		var sContent =
		"<a href='__CONTROLLER__/shopDetails/id/"+$id+"'><h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+$name+"</h4></a>" + 
		"<img style='float:right;margin:4px' src='"+$img+"' width='139' height='104' title='天安门'/>" + 
		"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+$content+"</p>" + 
		"</div>";
		map.addOverlay(marker);               // 将标注添加到地图中
		addClickHandler(sContent,marker);
	}

	// for(var i=0;i<"{$list}".length;i++){
	// 	// alert($list[0].lat)
	// 	var marker = new BMap.Marker(new BMap.Point("{$list[i].lat}","{$list[i].lon}"));  // 创建标注
	// 	var sContent =
	// 	"<a href='http://www.baidu.com'><h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+data_info[i][2]+"</h4></a>" + 
	// 	"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" + 
	// 	"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+data_info[i][3]+"</p>" + 
	// 	"</div>";
	// 	map.addOverlay(marker);               // 将标注添加到地图中
	// 	addClickHandler(sContent,marker);
		
	// }
	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			openInfo(content,e)}
		);
	}
	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口

		// document.getElementById('imgDemo').onload = function (){
		//    infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
	 //   }
	}
	// $("#imgDemo").on("click",function(){
	// 		alert("1");
	// 	});

</script>
